<template>
    <div  class="outwrap">
           <div ref="wrap" v-if="isSub">
                <div class="top"> 
                    <van-image
                        width="110"
                        height="25"
                        :src="topImage"
                        class="topImage"
                        fit="cover"
                    v-if="!isShadow"
                    />
                    <span v-if="!isShadow" class="topTitle">江门广电网络上门服务登记表</span>  
                    <span v-if="isShadow" class="shadowTitle"> 江门广电网络上门服务登记表 </span>

                </div> 
            <!-- <span> {{ activeId }} </span> -->
                    <van-form @submit="onSubmit">
                        <van-cell-group inset>
                            <van-field
                            v-model="custom_phone"
                            name="phone"
                            label="联系电话"
                            type="digit"
                            placeholder="联系电话"
                            :rules="[{ required: true, message: '请填写' }]"
                            />
                            <van-field
                            v-model="addr"
                            name="addr"
                            label="上门服务地址"
                            placeholder="上门服务地址"
                            :rules="[{ required: true, message: '请填写' }]"
                            />

                            <van-field name="bugView" label="上门服务内容"  :rules="[{ required: true, message: '请填写' }]">
                                <template #input>
                                    <van-radio-group v-model="checked" direction="horizontal">
                                        <van-radio name="电视">电视</van-radio>
                                        <van-radio name="宽带">宽带</van-radio>
                                        <van-radio name="其他">其他</van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                            <p class="HightLight">按疫情防控要求，请如实填报以下信息：
                                请问您与您同住人员</p>
                            <p style="font-size:16px;float: left;">健康码是否均为绿码？</p>
                            <van-field name="isGreen" label=""  :rules="[{ required: true, message: '请填写' }]">
                                <template #input>
                                    <van-radio-group v-model="isGreen" direction="horizontal">
                                        <van-radio name="是">是</van-radio>
                                        <van-radio name="否">否</van-radio>                                
                                    </van-radio-group>
                                </template>
                            </van-field>
                            <p style="font-size:16px;float: left;text-align: left;">近14天内是否有停留风险区域，含高中风险（包括但不限于江门市政府疫情排查的地区）或境外旅居史？</p>
                            <van-field name="isHighDanger" label=""  :rules="[{ required: true, message: '请填写' }]">
                                <template #input>
                                    <van-radio-group v-model="isHighDanger" direction="horizontal">
                                        <van-radio name="是">是</van-radio>
                                        <van-radio name="否">否</van-radio>                                
                                    </van-radio-group>
                                </template>
                            </van-field>
                            <p style="font-size:16px; float: left;text-align: left;">是否属于社区要求或建议的居家隔离期内</p>
                            <van-field name="isInside" label=""    :rules="[{ required: true, message: '请填写' }]">
                                <template #input>
                                    <van-radio-group v-model="isInside" direction="horizontal">
                                        <van-radio name="是">是</van-radio>
                                        <van-radio name="否">否</van-radio>                                
                                    </van-radio-group>
                                </template>
                            </van-field>
                            <p style="text-align:left;font-size:16px;">如上述信息有变化，请及时通知我司！
        </p>
        <p style="font-size:16px;"> <b>监督服务热线 96956</b> <span style="margin-left:10px;">{{mmday}}</span> </p>
                        </van-cell-group>
                        <div style="margin: 16px;">
                            <van-button round block type="primary" native-type="submit">
                            {{subWord}}
                            </van-button>
                        </div>
                </van-form>
           </div>

              <van-image
                        :src="curImage"
                       class="lookImage"
                        v-if="!isSub"
                       @click="handleShow([curImage])" 
                />
                <p v-if="!isSub" style="font-size:20px; color: red;width: 90%;margin: 5px auto;"> 请您长按图片，微信发回给我司工作人员。 </p>
    </div>



</template>

<script setup>
import { ref, onMounted, reactive, inject } from 'vue';
import {useRouter, useRoute} from 'vue-router'
import { ImagePreview } from 'vant';
import html2canvas from 'html2canvas'
import moment from 'moment'
import 'moment/locale/zh-cn';

let router = useRouter();
let route = useRoute()
console.log('llllqqq', route.query.name)
const activeId = ref('1');
activeId.value  = route.query.name
const activeIndex = ref(0);
const custom_phone = ref('');
const checked = ref('');
const addr = ref('');
const isGreen = ref('')
const isHighDanger = ref('')
const isInside = ref('')
const subWord =  ref('提交')
const curImage = ref('https://csdnimg.cn/release/passport_fe/assets/images/wel_tips.5624828.png')  //tupian
const topImage = ref('https://636c-cloud1-5gc90rkv0c4a396c-1310135976.tcb.qcloud.la/single_gd_logo.png?sign=83e9efa6b783390380ab22ece8b6702a&t=1659953624')
const wrap = ref(null)
const isSub = ref(true)
const isShadow = ref(false)
let mmday = ref('')
moment.locale('zh-cn')
mmday.value = `${moment().format('YYYY')}年${moment().format('M')}月${moment().format('D')}日`
//  mmday.value =  dateFormat(new Date(date.getFullYear(), date.getMonth(), item+1), 'yyyy-mm-dd');

const onSubmit = async(values) => {
    const db = cloud.database();  
    console.log('SSSSSubmit', values);

    let r=confirm("确认提交？信息一经提交无法修改！")

    if (r==true){
                subWord.value = '已确认'   
                                isShadow.value = true
                await db.collection('installer').add(values).then(res=>{ console.log('数据库录入登记完成', res) })
                    .catch(error=>{ console.log('正在录入', error) })                   
                setTimeout(()=>{
                    html2canvas(wrap.value, {
                        width: document.body.clientWidth,
                        height:  document.body.clientHeight
                    }).then((canvas) => {
                        curImage.value = canvas.toDataURL('image/png');
                        isSub.value = false
                          // Fetch会返回Promise 所以我们可以使用then 拿到请求成功的结果
                let fetchValue = encodeURI( JSON.stringify(values) + '--' + mmday.value  )      // server酱 pushdear
                let myHeaders = new Headers();
                myHeaders.append("Content-Type", "application/json");
                fetch(`http://119.91.25.158:3000/gifts/complex`,{
                       method: 'POST',
                       headers: myHeaders,
                        body: JSON.stringify( { "gifts": fetchValue } ),
                        redirect: 'follow'
                    }).then(function(data){     
                        return data.text()              
                }).then(function (data) {
                        // 在这个then里面我们能拿到最终的数据
                        console.log('Fetch == ', decodeURI( data ) )
                        })

                    })
            }, 0)
            
        } else {
            console.log('取消了')
        }

        }


 const handleShow = (item)=>{
    console.log('弹出层', item)
    ImagePreview({
        images:item,
        closeable: true
    });
 }
//  const onitemclick = (data)=>{
//             console.log(data)
//               router.push({
//                 name: 'complexDetail',
//                 query: { name: data.text, mainIndex: activeIndex.value  }
//             })
//         }

onMounted(async()=>{
                const db = cloud.database();  
                console.log('vuex booking test')
                // userInfo.value = utils.getCookie('user')
                // console.log('用户类型', userInfo)     
                // ElMessage('this is a message.')                 
                // console.log( moment.locale('ch-cn') ) 
                // fetch(`http://localhost:8090/fct/message/push?pushkey=PDU14371T8bVqcaysQ1bz36z0DCH9gWQ2ATxA0hRH&text=${fetchValue}`,{
                //         method: "GET", headers: { "Access-Control-Allow-Origin": "*" }
                //     }).then(function(data){     
                //         return data.text()              
                // }).then(function (data) {
                //         // 在这个then里面我们能拿到最终的数据
                //         console.log('Fetch == ',data)
                //     })
                // let myHeaders = new Headers();
                // myHeaders.append("Content-Type", "application/json");
                // fetch(`http://119.91.25.158:3000/gifts/complex`,{
                //        method: 'POST',
                //        headers: myHeaders,
                //         body: JSON.stringify( { "gifts": "fetchValue" } ),
                //         redirect: 'follow'
                //     }).then(function(data){     
                //         return data.text()              
                // }).then(function (data) {
                //         // 在这个then里面我们能拿到最终的数据
                //         console.log('Fetch == ',data)
                //         })

                
            })
const cloud = inject('$cloud')
const axios = inject('$http')

</script>

<style lang="scss">
    body {
        margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
    }
    .top{
        margin: 2px auto;
        margin-bottom: 16px;
        width: 100%;
        background: rgba(255, 165, 0, 0.9);
        padding-bottom: 5px;
        padding-top: 5px;
        font-weight: bold;
        font-size: 17px;
        position: relative;
        height: 24px;
    }
    .tree{
        height: 500px !important;
    }
    .HightLight{
        font-size: 18px;
        color: darkgoldenrod;
    }
    .lookImage{
        width: 80%;
        margin-top: 100px;
    }
    .topTitle{
        position: absolute;
        right: 5%;
        top:8px;
    }
    .topImage{
        position: absolute;
        left: 2%;
        top: 6px;
        // width: 104px;
        // height: 24px;
    }
</style>